import React, { useEffect, useState } from "react";
import {
    Breadcrumb,
    Card,
    Row,
    Modal,
    Input,
    Button,
    Table,
    message,
} from "antd";
import { MergeRouteComponentProps } from "../../../../router/types";
import { addItem, fetchList, removeItem } from "../../../../http/room";
import { ExclamationCircleOutlined, PlusOutlined } from "@ant-design/icons";

interface IProps extends MergeRouteComponentProps {}

const MenuAdd: React.FC<IProps> = () => {
    /**
     * 表格每列配置
     */
    const columns = [
        {
            title: "ID",
            dataIndex: "id",
        },
        {
            title: "教室号",
            dataIndex: "name",
        },
        {
            title: "操作",
            render: (text: any, record: any) => (
                <Button type="link" onClick={() => onDeleteClicked(record)}>
                    删除
                </Button>
            ),
        },
    ];

    /**
     * 组件状态数据
     */
    const [list, setList] = useState([]);
    const [addModalVisible, setAddModalVisible] = useState(false);
    const [name, setName] = useState("");

    /**
     * 获取用户列表
     */
    useEffect(() => {
        getList();
    }, []);

    /**
     * 获取列表
     */
    const getList = async () => {
        const res = await fetchList();
        if (res.data.code !== 200) {
            message.error(res.data.message);
            return;
        }
        setList(res.data.data);
    };

    /**
     * 删除某行数据
     * @param record 当前行记录
     */
    const onDeleteClicked = (record: any) => {
        Modal.confirm({
            title: "操作提示",
            icon: <ExclamationCircleOutlined />,
            content: `你确定要删除 ${record.name} 教室吗？`,
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                // console.log("record", record);
                const res = await removeItem(record.id);
                if (res.data.code !== 204) {
                    message.error(res.data.message);
                    return;
                }
                // 删除成功，提示成功，刷新列表
                message.success(res.data.message);
                getList();
            },
            onCancel() {
                console.log("取消操作");
            },
        });
    };

    /**
     * 添加教室弹框
     */
    const AddModal = (
        <Modal
            title="添加教室"
            okText="确定"
            cancelText="取消"
            visible={addModalVisible}
            onOk={async () => {
                // 添加教室
                const res = await addItem({ name });
                // 如果不成功，提示用户
                if (res.data.code !== 201) {
                    message.error(res.data.message);
                    return;
                }
                // 如果成功，刷新列表，关闭弹框
                getList();
                setAddModalVisible(false);
            }}
            onCancel={() => {
                setAddModalVisible(false);
            }}
        >
            <Input
                placeholder="请输入教室号"
                onChange={(v) => setName(v.target.value)}
            />
        </Modal>
    );

    return (
        <div className="menu-add">
            {/* 面包屑导航 */}
            <Breadcrumb>
                <Breadcrumb.Item>
                    <a href="">首页</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">班级管理</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">教室管理</a>
                </Breadcrumb.Item>
            </Breadcrumb>

            {/* 卡片视图 */}
            <Card>
                <Row>
                    <Button
                        type="primary"
                        onClick={() => setAddModalVisible(true)}
                    >
                        <PlusOutlined /> 添加教室
                    </Button>
                </Row>

                <Table
                    dataSource={list}
                    columns={columns}
                    rowKey={(record) => record.id}
                />
            </Card>

            {/* 添加教室弹框 */}
            {AddModal}
        </div>
    );
};

export default MenuAdd;
